<template>
    <div :class="{ 'p-16px': showPadding }" class="h-full page_all">
        <router-view v-slot="{ Component, route }">
            <transition name="fade-slide" mode="out-in" appear>
                <!-- <keep-alive :include="routeStore.cacheRoutes"> -->
                <component :is="Component" v-if="app.reloadFlag" :key="route.path" />
                <!-- </keep-alive> -->
            </transition>
        </router-view>
    </div>
</template>

<script setup lang="ts">
import { watch } from 'vue';
import { useAppStore } from '@/store';

interface Props {
    /** 显示padding */
    showPadding?: boolean;
}

withDefaults(defineProps<Props>(), {
    showPadding: true
});

const app = useAppStore();

watch(
    () => app.reloadFlag,
    (va: boolean) => {
        console.log(va);
    }
);
// const routeStore = useRouteStore();
</script>
<style scoped>
.p-16px {
    padding: 16px;
}
.page_all{
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
</style>
